<template>
    <div class="progress-bar-container">
      <div class="progress-bar" :style="{ width: progress + '%' }"></div>
    </div>
  </template>
   
  <script>
  export default {
    name: 'ProgressBar',
    props: {
      progress: {
        type: Number,
        required: true,
        validator: value => value >= 0 && value <= 100
      }
    }
  }
  </script>
   
  <style scoped>
  .progress-bar-container {
    width: 100%;
    height: 10px;
    background-color: #ddd;
    border-radius: 0.25rem;
    overflow: hidden;
  }
   
  .progress-bar {
    height: 100%;
    background-color: #4caf50;
    border-radius: 0.25rem;
    transition: width 0.5s ease;
  }
  </style>
  